<template>
  <ReportPage>
    <q-card flat class="my-card card-radius">
      <div class="q-pa-md">
        <div class="page-header">REPAIRING DETAILS OVERVIEW</div>
        <div class="row justify-left items-center q-my-md">
          <div class="weight q-px-sm">System:</div>
          <q-select
            v-model="system"
            :options="inputOptionStore.data.system"
            class="input-css"
            borderless
            dense
            style="width: 200px"
          ></q-select>
        </div>
        <div class="row justify-left items-center q-my-md">
          <div class="weight q-px-sm">Year:</div>
          <q-select
            v-model="year"
            :options="yearOptions"
            class="input-css"
            borderless
            dense
            style="width: 200px"
          ></q-select>

          <div class="weight q-px-sm">To Year:</div>
          <q-select
            v-model="toYear"
            :options="yearOptions"
            class="input-css"
            borderless
            dense
            style="width: 200px"
          ></q-select>
        </div>
        <q-card-actions>
          <q-btn label="submit" class="default-btn" @click="initData"> </q-btn>
        </q-card-actions>
      </div>
      <div class="row justify-center items-center q-my-md">
        <div bordered class="my-card" style="height: 1000px; width: 800px">
          <q-card-section >
           <!--  <v-chart class="chart" :option="repairingOption" autoresize /> -->
          <div id="main" style="height: 1000px; width: 800px"></div>
          </q-card-section>
        </div>
      </div>
    </q-card>
  </ReportPage>
</template>

<script setup lang="ts">
import VChart, { THEME_KEY } from 'vue-echarts';
import { use } from 'echarts/core';
import * as echarts from 'echarts/core';
import {
  DatasetComponent,
  TooltipComponent,
  GridComponent,
  LegendComponent
} from 'echarts/components';
import { LineChart, PieChart } from 'echarts/charts';
import { UniversalTransition, LabelLayout } from 'echarts/features';
import { CanvasRenderer } from 'echarts/renderers';

echarts.use([
  DatasetComponent,
  TooltipComponent,
  GridComponent,
  LegendComponent,
  LineChart,
  PieChart,
  CanvasRenderer,
  UniversalTransition,
  LabelLayout
]);

import { repairingOverview } from 'src/services/reportService';

const repairingOption = ref();

setTimeout(() => {
  var chartDom = document.getElementById('main');
  var myChart = echarts.init(chartDom);
  var option;
  option = {
    legend: {},
    tooltip: {
      trigger: 'axis',
      showContent: false,
    },
    dataset: {
      source: [
        ['product', '2012', '2013', '2014', '2015', '2016', '2017'],
        ['Milk Tea', 56.5, 82.1, 88.7, 70.1, 53.4, 85.1],
        ['Matcha Latte', 51.1, 51.4, 55.1, 53.3, 73.8, 68.7],
        ['Cheese Cocoa', 40.1, 62.2, 69.5, 36.4, 45.2, 32.5],
        ['Walnut Brownie', 25.2, 37.1, 41.2, 18, 33.9, 49.1],
      ],
    },
    xAxis: { type: 'category' },
    yAxis: { gridIndex: 0 },
    grid: { top: '55%' },
    series: [
      {
        type: 'line',
        smooth: true,
        seriesLayoutBy: 'row',
        emphasis: { focus: 'series' },
      },
      {
        type: 'line',
        smooth: true,
        seriesLayoutBy: 'row',
        emphasis: { focus: 'series' },
      },
      {
        type: 'line',
        smooth: true,
        seriesLayoutBy: 'row',
        emphasis: { focus: 'series' },
      },
      {
        type: 'line',
        smooth: true,
        seriesLayoutBy: 'row',
        emphasis: { focus: 'series' },
      },
      {
        type: 'pie',
        id: 'pie',
        radius: '30%',
        center: ['50%', '25%'],
        emphasis: {
          focus: 'self',
        },
        label: {
          formatter: '{b}: {@2012} ({d}%)',
        },
        encode: {
          itemName: 'product',
          value: '2012',
          tooltip: '2012',
        },
      },
    ],
  };

  myChart.on('updateAxisPointer', function (event: any) {
    const xAxisInfo = event.axesInfo[0];
    if (xAxisInfo) {
      const dimension = xAxisInfo.value + 1;
      myChart.setOption({
        series: {
          id: 'pie',
          label: {
            formatter: '{b}: {@[' + dimension + ']} ({d}%)',
          },
          encode: {
            value: dimension,
            tooltip: dimension,
          },
        },
      });
    }
  });
  myChart.setOption(option);

  option && myChart.setOption(option);

  repairingOption.value = option
}, 2000);



use([
DatasetComponent,
  TooltipComponent,
  GridComponent,
  LegendComponent,
  LineChart,
  PieChart,
  CanvasRenderer,
  UniversalTransition,
  LabelLayout
]);

provide(THEME_KEY, 'light');

import ReportPage from 'src/pages/ReportPage.vue';
import { useInputOption } from 'src/stores/inputOptionStore';
import { ref, provide, onMounted } from 'vue';
import { RepairingOverview } from 'src/services/type';

const inputOptionStore = useInputOption();
inputOptionStore.init();

const system = ref('ALL');
const year = ref('ALL');
const toYear = ref('-----');

const yearOptions: string[] = [];

function initYear() {
  const initYear = 2018;
  let i = 0;
  while (i < 83) {
    yearOptions.push((initYear + i).toString());
    i++;
  }
}

initYear();

async function initData() {
  const res = await repairingOverview(system.value, year.value);
  console.log(res);

 /*  repairingOption.value.series[0].data = res; */
  /* res.map((item)=>{
      console.log(item);
      
      return {
        ...item,
        label: {
          formatter: '{b}: {@2012} ({d}%)'
        }}
    })
    console.log(repairingOption.value.series[0].data); */
}
initData();
// onMounted(() => {
// })
</script>

<style scoped></style>
